<template>
  <div id="service">
    <HeaderItem></HeaderItem>
    <TitleItem :title="title" :title2="title2"></TitleItem>
    <!-- 搬家 -->
    <div class="talkbox">
      <div class="talk">
        <div>
          <img src="../assets/page/box_img.png" alt="" class="talkimg" />
        </div>
        <div class="talkright">
          <h1>搬家和仓储服务</h1>
          <p class="talktext">
            通过砖块和点击结果有效恢复自适应质量矢量。热情地拥抱可互操作的涡流，而替代技
          </p>
          <p class="movetext">
            在业务门户之后主动将以原则为中心的流程产品化。热情地瞄准分布式电子市场，同时进行24/365创新。在材料的高标准之前，将未来的战略主题领域完全网格化。荧光灯重新利用高回报指标相对于战术门户。全球定制病毒流程，以实现最先进的思想共享。
          </p>
          <div class="movelist">
            <ul>
              <li>将下一代产品化</li>
              <li>没有及时经验的思想分享</li>
              <li>完全救皇</li>
              <li>资源均衡</li>
              <li>高潜力</li>
            </ul>
            <ul>
              <li>将下一代产品化</li>
              <li>没有及时经验的思想分享</li>
              <li>完全救皇</li>
              <li>资源均衡</li>
              <li>高潜力</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 搬家 -->
    <!-- 特色服务 -->
    <div class="servicebox">
      <div class="service">
        <h1>特色服务</h1>
        <div class="crewoneline">
          <div class="crewone" v-for="(item, i) in crewlist" :key="i">
            <img :src="item.img" alt="" class="crewimg" />
            <div class="cobot">
              <h1 class="coname">{{ item.name }}</h1>
              <p class="cobottext">{{ item.text }}</p>
              <button class="cobotbut">继续阅读→</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 特色服务 -->
    <FooterItem></FooterItem>
  </div>
</template>


<script>
import HeaderItem from "../components/HeaderItem.vue";
import FooterItem from "../components/FooterItem.vue";
import TitleItem from "../components/TitleItem.vue";
export default {
  components: {
    HeaderItem,
    FooterItem,
    TitleItem,
  },
  data() {
    return {
      title: "我们的全球服务",
      title2: "家/服务业",
      crewlist: [
        {
          name: "航空运输",
          text: "内在地制定针对功能化命今的特殊思想份额的战略。通过无线创意大力激励创新融合。",
          img: "src/assets/page/item_img.png",
        },
        {
          name: "海上运输",
          text: "内在地制定针对功能化命今的特殊思想份额的战略。通过无线创意大力激励创新融合。",
          img: "src/assets/page/item_img.png",
        },
        {
          name: "货运",
          text: "内在地制定针对功能化命今的特殊思想份额的战略。通过无线创意大力激励创新融合。",
          img: "src/assets/page/item_img.png",
        },
      ],
    };
  },
};
</script>


<style>
/* 搬家 */
.talkbox {
  width: 100%;
  background-color: #ffffff;
}
.talk {
  width: 65%;
  margin: auto;
  display: flex;
  padding-top: 150px;
  padding-bottom: 100px;
  box-sizing: border-box;
}
.talkright {
  width: 60%;
  margin-left: 30px;
  box-sizing: border-box;
}
.talktext {
  margin-top: 50px;
  color: #5d9ad2;
  line-height: 40px;
}
.movetext {
  line-height: 30px;
  color: #656b78;
}
.movelist {
  color: #656b78;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.movelist > ul > li {
  line-height: 40px;
}
/* 搬家 */
/* 特色服务 */
.servicebox{
  width: 100%;
  background-color: #F7F7F7;
}
.service {
  width: 65%;
  margin: auto;
  padding-top: 50px;
  padding-bottom: 130px;
}
.crewoneline {
  width: 100%;
  display: flex;
  margin-top: 80px;
  justify-content: space-between;
}
.crewone {
  width: 30%;
  background-color: white;
}
.crewimg {
  width: 100%;
}
.cobot {
  padding: 40px 25px;
}
.cobottit {
  color: #cdcdcd;
}
.cobottext {
  margin-top: 35px;
  margin-bottom: 40px;
  color: #62646c;
}
.cobotimgbox {
  width: 100%;
  display: flex;
}
.yuan {
  margin-right: 20px;
  width: 10%;
  height: 10%;
  background-color: #c5c5c5;
  border-radius: 50%;
}
.cobotbut {
  background-color: #158be0;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
}
/* 特色服务 */

/* 响应1024px */
@media screen and (max-width: 1024px) {
  /* 搬家 */
  .talk {
    width: 100%;
    padding: 20px;
    display: block;
  }
  .talkimg {
    width: 50%;
  }
  .talkright {
    width: 90%;
  }
  .movelist {
    display: block;
  }
  /* 搬家 */
  /* 特色服务 */
  .cobot {
    padding: 0;
  }
  .coname {
    font-size: 20px;
  }
  .service{
    padding: 0;
    width: 100%;
  }
  /* 特色服务 */
}

/* * 响应370px * */
@media screen and (max-width: 370px) {
  /* 话 */
  .talkimg {
    width: 100%;
  }
  .talkright > h1 {
    font-size: 20px;
  }
  .talktext {
    margin-top: 10px;
    line-height: 20px;
  }
  /* 话 */
  /* 船员 */
  .crewoneline {
    display: block;
  }
  
  .crewone {
    width: 100%;
  }
  .crewtwoline {
    display: block;
  }
  .crewtwo {
    width: 100%;
  }
  /* 船员 */
}
</style>